<template>
  <div class="container">
    <mt-header fixed title="项目会谈">
      <router-link :to="{name:'project'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div id="wrapper" ref="scrollWrap">
      <div class="scroller" ref="scroller">
        <ul ref="scrollList" v-if="projectMeetingList.length >0">
          <li v-for="projectMeeting in projectMeetingList" :key="projectMeeting.id" >
            <project-meeting-list-item @click.native="showPop(projectMeeting)" :projectMeeting="projectMeeting"></project-meeting-list-item>
          </li>
        </ul>
        <empty-list v-else></empty-list>
      </div>
    </div>

    <mt-popup
      v-model="popupVisible"
      position="right"
      :modal="false"
      class="mint-popup-3">
      <project-meeting-detail @ievent = "ievent" :meeting="meeting" ></project-meeting-detail>
    </mt-popup>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import { Indicator } from 'mint-ui';
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import fetch from '../../utils/fetch'
  import ProjectMeetingListItem from './ProjectMeetingListItem.vue'
  import EmptyList from '../Empty-List'
  import ProjectMeetingDetail from './ProjectMeetingDetail.vue'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   * @param stop 下拉刷新后回滚
   */

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop: 0*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default{
    data (){
      return{
        projectMeetingList: [],
        popupVisible: false,
        meeting:Object
      }
    },
    components:{
      ProjectMeetingListItem,
      EmptyList,
      ProjectMeetingDetail
    },
    mounted(){
      const {scroller,scrollWrap,scrollList}=this.$refs;
      this.scroller = new BScroll(scrollWrap,{
        click:true,
        probeType:3,
        pullDownRefresh:DOWN_CONFIG,
        pullUpLoad:UP_CONFIG
      })
      this.handleGetProjectMeetings()
    },
    methods:{
      handleGetProjectMeetings() {
        let projectId = this.$route.params.projectId
        fetch('/api/project/' + projectId + '/meeting/list').then(response => {
          if (response.data.success) {
            this.projectMeetingList = response.data.obj
          }
        })
      },
      showPop(meeingListItem){
        if(!this.popupVisible) {
          this.meeting = meeingListItem
        }
        this.popupVisible = !this.popupVisible

      },
      ievent(){
        this.popupVisible = false
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    position: relative;
    height: 100%;
    #wrapper{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background:#F0EFF5;
      .scroller{
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 0;
      }
    }
  }

  .mint-popup-3{
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>
